<template>
  <div class="cursor-pointer">
    <div class="flex justify-center item-center m-4">
      <span>难度：</span>
      <input
        type="range"
        step="1"
        min="10"
        max="70"
        v-model="level"
        @change="onLevel"
      />
      <span class="ml-2">{{levelTip}}</span>
    </div>
    <div class="flex justify-center item-center my-8 gap-4">
      <button
        @click="generateAndDisplaySudoku"
        class="flex bg-blue-500 text-white hover:bg-blue-600 active:text-gray-500 transition-all px-4 py-1 rounded"
      >
        生成地图
      </button>
      <button
        @click="checkSudoku"
        class="flex bg-red-500 text-white hover:bg-red-600 active:text-gray-500 transition-all px-4 py-1 rounded"
      >
        检测答案
      </button>
    </div>

    <!-- 地图 -->
    <div class="m-4 sm:m-12">
      <div
        v-for="(row, rowIndex) in state.sudokuData"
        :key="rowIndex"
        class="flex m-0 align-middle justify-center"
      >
        <div
          v-for="(cell, cellIndex) in row"
          :key="cellIndex"
          :class="getColor(rowIndex, cellIndex)"
          @click="onChoose(rowIndex, cellIndex)"
          class="flex flex-1 basis-0 transition-all duration-300 sm:w-12 sm:flex-none aspect-square box-border border m-0 border-gray-300 items-center justify-center"
        >
          {{ cell || "" }}
        </div>
      </div>
    </div>
    <div
      class="flex align-middle justify-center w-full fixed bottom-4 left-0 box-border p-4"
    >
      <div
        v-for="cell in 10"
        :key="cell"
        @click="onFill(cell - 1)"
        class="flex flex-1 basis-0 text-black sm:w-12 sm:flex-none aspect-square border box-border m-0 border-gray-700 bg-yellow-500 hover:bg-yellow-600 items-center justify-center"
      >
        {{ cell - 1 || "" }}
      </div>
    </div>

    <result
      :tip="pop.result.tip"
      v-if="pop.result.show"
      @close="onClose"
    ></result>
  </div>
</template>

<script setup>
import { reactive, onMounted, ref, computed } from "vue";
import {
  generateSudoku,
  isSudokuValid,
  clearRandomPositions,
  getPositionsOfNum,
  getGroupNumber,
} from "./tooler";
import result from "../panel/result.vue";

const cur = reactive({ row: -1, col: -1 });
const level = ref(10);
const state = reactive({
  sudokuData: Array(9).fill(Array(9).fill(0)),
});

const levelTip = computed(() => {
  const num = level.value;
  if (num >= 10 && num < 30) {
    return "简单";
  } else if (num >= 30 && num < 50) {
    return "普通";
  } else if (num >= 50 && num < 60) {
    return "困难";
  } else {
    return "地狱";
  }
});
const pop = reactive({
  result: {
    show: false,
    tip: "",
  },
});
const same = ref([]);
const empty = ref([]);
function generateAndDisplaySudoku() {
  let list = generateSudoku();
  empty.value = clearRandomPositions(list, level.value);
  state.sudokuData = list;
  same.value = [];
  cur.row = -1;
  cur.col = -1;
  console.log(state.sudokuData);
}

function getColor(rowIndex, cellIndex) {
  const ary = [];

  if (rowIndex % 3 === 2) {
    // ary.push("bg-blue-100/5");
    ary.push("border-b-2");
  } else {
    ary.push("border-b-0");
  }
  if (cellIndex % 3 === 2) {
    // ary.push("bg-blue-100/5");
    ary.push("border-r-2");
  } else {
    ary.push("border-r-0");
  }

  if (cur.row === rowIndex && cur.col === cellIndex) {
    ary.push("bg-yellow-500/40");
  } else if (
    same.value.some((pos) => pos.row === rowIndex && pos.col === cellIndex)
  ) {
    ary.push("bg-red-500/30");
  } else if (getGroupNumber(rowIndex, cellIndex) % 2) {
    ary.push("bg-blue-100/10");
  }
  return ary;
}

function checkSudoku() {
  const suc = isSudokuValid(state.sudokuData);
  console.log(suc);
  pop.result.show = true;
  pop.result.tip = suc ? "成功" : "失败";
}

function onFill(n) {
  if (cur.row === -1 || cur.col === -1) {
    return;
  }
  state.sudokuData[cur.row][cur.col] = n;
  let ary = getPositionsOfNum(state.sudokuData, cur.row, cur.col, n);
  console.log(ary);
  same.value = ary;
}

function onChoose(row, col) {
  if (empty.value.some((pos) => pos.row === row && pos.col === col)) {
    cur.row = row;
    cur.col = col;
  }
}

function onClose() {
  pop.result.show = false;
  console.log("==");
}

function onLevel() {
  console.log(level.value);
}

onMounted(() => {
  // 初始化时生成一次数独
  generateAndDisplaySudoku();
});
</script>
